<template>
  <div class="about">
    <div class="img">
      <img src="../assets/img/5.png" alt="" />
    </div>
    <div class="content">
      <div class="phone">
        <el-form
          ref="ruleFormRef"
          label-position="right"
          label-width="68px"
          :model="formInline"
          class="demo-form-inline"
          :rules="rules"
        >
          <el-form-item label="姓名" size="large">
            <el-input
              v-model="formInline.name"
              placeholder="请输入姓名"
              clearable
            />
          </el-form-item>
          <!-- <el-form-item label="手机号" size="large" prop="phone">
            <el-input
              v-model="formInline.phone"
              placeholder="请输入手机号"
              clearable
            />
          </el-form-item> -->
          <el-form-item label="身份证号" size="large" prop="code">
            <el-input
              v-model="formInline.code"
              placeholder="请输入身份证号"
              clearable
            />
          </el-form-item>
          <el-form-item class="item">
            <el-button
              size="large"
              type="primary"
              @click="submitForm(ruleFormRef)"
              >测测您能借多少钱</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- <div class="bottom">
      <img src="../assets/img/4.png" alt="">
    </div> -->
    </div>
    <!-- <div class="bottom_text">
      <p>到账时间5分钟起，额度和放款时间以实际审批为准； </p>
    <p>（到账时间：提交借款申请到资金到账时间</p>
    <p>市场有风险，选择需谨慎；</p>
    <p>请根据个人能力合理贷款，理性消费，避免逾期 </p>
    </div> -->
    
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const ruleFormRef = ref();
const route=useRouter()
const PhoneReg =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
const codeReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
const formInline = ref({});
// const validatePhone = (rule, value, callback) => {
//   if (value === "") {
//     callback(new Error("请输入手机号"));
//     return;
//   } else {
//   }
//   if (!PhoneReg.test(value)) {
//     callback(new Error("请输入正确手机号"));
//     return;
//   }
//   callback();
// };
const validateCode = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入身份证号码"));
    return;
  }
  if (!codeReg.test(value)) {
    callback(new Error("请输入正确身份证号码"));
    return;
  }
  callback();
};
const rules = {
  // phone: [{ validator: validatePhone, trigger: "blur" }],
  code: [{ validator: validateCode, trigger: "blur" }],
};
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      route.push({
        path:'/home'
      })
    } else {
      console.log("error submit!");
    }
  });
};
const arr=[1,2,4,3,1]
const arr1=arr.sort((a,b)=>{
  console.log(a,b)
  console.log(a-b)
  return a-b
})
console.log(arr1,arr)
</script>
<style scoped>
.about {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 28, 159, 1);
  padding: 0 .625rem;
}
.img {
  width: 100%;
  height: 16.25rem;
}
.img img {
  width: 100%;
  height: 100%;
  position: relative;
}
.img::before{
  content: '坤坤贷';
  color: white;
  display: block;
  width: 17.7778vw;
  height: 1.875rem;
  position: absolute;
  z-index: 999;
  left: 1.25rem;
  top: .875rem;
  text-align: center;
  align-content: center;
  background-color:rgba(0, 28, 159, .5);
  backdrop-filter: blur(20px);
}
.content {
  padding: 0.625rem 1.25rem;
  flex: 1;
}
.bottom{
  width: 100%;
  margin-top: 1.25rem;
}
.bottom img{
  width: 100%;
}
.phone {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 1.25rem 1.25rem;
}
.el-form {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.item {
  margin-left: 1.875rem;
}
button {
  height: 13.3333vw;
}
.bottom_text{
  width: 100%;
  text-align: center;
  color: white;
}
p{
  margin-bottom: .5rem;
}
</style>
